<template>
  <div class="view">
    <el-row class="box" style="height:100%">
      <el-col :span="9" class="leftBox yhqxgl" style="height: 100%;margin-right: 15px;">
        <header>
          <div :class="theme === 'dark' ? 'headline headLeft' : 'headlines'">
            <span :class="theme != 'dark' ? 'fontbold':''"><i :class="theme === 'dark' ? 'iconfont icon-biaozhu':'iconfont el-icon-s-tools'"></i>用户</span>
          </div>
          <div class="msg yhqxmsg">
            <span><i class="iconfont icon-message"> :</i>{{$t("authority.userPrompt")}}</span>
          </div>
        </header>
        <div class="content yhqxcheck">
          <el-radio v-for="item in userIds" v-model="radio" @change='getMenuData(radio)' :label="item.userId" :key="item.userId" border>{{item.userName}}</el-radio>
        </div>
      </el-col>
      <el-col :span="15" class="rightBox yhqxrigtbox">
        <header :style="theme === 'dark' ? '' : 'display:none'">
          <div class="headline headRight">
            <span><i class="iconfont icon-biaozhu"></i>{{$t("authority.distribution")}}</span>
          </div>
          <div :class="theme === 'dark' ? 'msgs' : 'msg' ">
            <span><i class="iconfont icon-message"> :</i>{{$t("authority.prompt")}}</span>
          </div>
        </header>
        <div class="content" style="padding:15px;">
          <!-- 总全选-->
          <div class="rightTop" :style="theme==='dark'?'':'border-bottom: 2px solid #82aeea;margin-bottom: 15px;'">
          <el-checkbox v-show="menuData.length==0 ? false : true" class="checkedAll" :indeterminate="indeterminate" v-model="isCheckAll"
                       @change="checkAll">{{$t("authority.check")}}
          </el-checkbox>
          <el-button type="primary" class="save" @click="save" icon="el-icon-document-checked">{{$t("public.save")}}</el-button>
          </div>
          <el-collapse v-model="activeNames">
            <el-collapse-item v-for="(one,oneIndex) in menuData" :key="oneIndex" :name='oneIndex'>
              <template slot="title">
                <!-- 一级 权限列表-->
                <el-checkbox :indeterminate="one.indeterminate" v-model="one.menuBool"
                             @change="checkedOneAll(oneIndex,one.menuId,$event)"
                             :key="oneIndex">{{ one.menuName }}
                </el-checkbox>
              </template>
              <!-- 二级 权限列表-->
              <el-checkbox v-for="(two,twoIndex) in one.children" v-model="two.menuBool"
                           @change="checkedTwoAll(oneIndex,twoIndex,two.menuId,one.menuId,$event)"
                           :indeterminate="two.indeterminate" :key="twoIndex">{{two.menuName}}
                <!-- <div style="position: absolute" v-if="two.children.length>0">
                  <el-checkbox style="display:block;line-height: 2" v-for="(three,threeIndex) in two.children"
                               :key="threeIndex"
                               v-model="three.menuBool"
                                :title="three.menuName"
                               @change="checkedThreeAll(oneIndex,twoIndex,threeIndex,three.menuId,two.menuId,one.menuId,$event)"
                  >{{three.menuName}}
                  </el-checkbox>
                </div> -->
              </el-checkbox>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userIds:[], //角色信息
      radio: null, //角色选择
      activeNames: [0,1,2,3,4,5,6,7], //默认展开的title列表
      menuData:[],//权限选项列表
      isCheckAll: false,//一级全选状态
      indeterminate: false,
      Menuid: [], //发送选中菜单集
      theme:this.$store.state.theme,//主题切换  dark / light
    };
  },
  mounted() {
    // this.getUserinfo();
    this.getRole();
  },
  methods: {
    //获取数组中的某一属性集合
    getAttrs(array,attr) {
      let arr = array.map((item)=>{
          return item[attr];
      })
      return arr;
    },
    //删除
    remove(arr, item){
      if(!arr.length){
        return;
      }
      var index = arr.indexOf(item);
      if(index > -1){
        arr.splice(index, 1);
      }	
    },
    //添加
    add(arr, item) {
      if(arr.indexOf(item)>=0){
        return false;
      }else{
        arr.push(item)
      }
    },
    //总change事件
      checkAll(e) {
        this.ischeckAll = e;
        if (e === true) {
          this.indeterminate = false;
          for (var i = 0, len = this.menuData.length; i < len; i++) { //二级全选反选不确定
            this.menuData[i].menuBool = e;
            this.menuData[i].indeterminate = false;
            this.add(this.Menuid,this.menuData[i].menuId)
            for (var j = 0, len1 = this.menuData[i].children.length; j < len1; j++) {
              this.menuData[i].children[j].menuBool = e;
              this.add(this.Menuid,this.menuData[i].children[j].menuId)
              // for (var k = 0, len2 = this.menuData[i].children[j].children.length; k < len2; k++) {
              //   this.menuData[i].children[j].children[k].menuBool = e
              //   this.add(this.Menuid,this.menuData[i].children[j].children[k].menuId)
              // }
            }
          }
        } else {
          this.indeterminate = false;
          for (var i = 0, len = this.menuData.length; i < len; i++) { //三级全选反选不确定
            this.menuData[i].menuBool = e;
            this.menuData[i].indeterminate = false;
            this.remove(this.Menuid,this.menuData[i].menuId)
            for (var j = 0, len1 = this.menuData[i].children.length; j < len1; j++) {
              this.menuData[i].children[j].menuBool = e;
              this.remove(this.Menuid,this.menuData[i].children[j].menuId)
              // for (var k = 0, len2 = this.menuData[i].children[j].children.length; k < len2; k++) {
              //   this.menuData[i].children[j].children[k].menuBool = e
              //   this.remove(this.Menuid,this.menuData[i].children[j].children[k].menuId)
              // }
            }
          }
        }
      },
      //一级change事件
      checkedOneAll(oneIndex, oneId, e) {
        this.menuData[oneIndex].menuBool = e;//一级勾选后，子级全部勾选或者取消
        if (e === true) {
          //去掉一级不确定状态
          this.menuData[oneIndex].indeterminate = false;
        }
        let childrenArray = this.menuData[oneIndex].children;
        if (childrenArray.length>0 && e === true) {
          childrenArray.forEach(oneItem=>{
            oneItem.menuBool = e;
            this.add(this.Menuid,oneItem.menuId)
            // if(oneItem.children.length>0){
            //   oneItem.children.forEach(twoItem=>{
            //     this.add(this.Menuid,twoItem.menuId)
            //     twoItem.menuBool=e;
            //   })
            // }
          })
          this.add(this.Menuid,oneId)
        }else if (childrenArray.length>0 && e === false){
          childrenArray.forEach(oneItem=>{
            this.remove(this.Menuid,oneItem.menuId)
            oneItem.menuBool = e;
            // if(oneItem.children.length>0){
            //   oneItem.children.forEach(twoItem=>{
            //     twoItem.menuBool=e;
            //     this.remove(this.Menuid,twoItem.menuId)
            //   })
            // }
          })
          this.remove(this.Menuid,oneId)
        }else if(childrenArray.length == 0 && e === true){
          this.add(this.Menuid,oneId)
        }else{
          this.remove(this.Menuid,oneId)
        }
        this.getIsCheckAll()
      },
      //二级change事件
      checkedTwoAll(oneIndex, twoIndex, twoId, oneId, e) {
        var childrenArray = this.menuData[oneIndex].children;
        var tickCount = 0, unTickCount = 0, len = childrenArray.length;
        for (var i = 0; i < len; i++) {
          if (twoId === childrenArray[i].menuId) {
            childrenArray[i].menuBool = e;
            if(e === true){
              this.add(this.Menuid,twoId)
            }else if(e===false){
              this.remove(this.Menuid,twoId)
            }
          }
          if (childrenArray[i].menuBool === true) tickCount++;
          if (childrenArray[i].menuBool === false) unTickCount++
        }
        if(tickCount == 0){
          this.remove(this.Menuid,oneId)
        }
        //判断二级下面是否还有三级，点击选择二级(选择与不选）时候下面三级是全选还是全不选
        // if (childrenArray[twoIndex].children.length > 0) {
        //   childrenArray[twoIndex].children.forEach(threeItem => {
        //     threeItem.menuBool = e;
        //     if(e === true){
        //       this.add(this.Menuid,threeItem.menuId)
        //     }else if(e===false){
        //       this.remove(this.Menuid,threeItem.menuId)
        //     }
        //   });
        //   //判断二级是否选中
        //   childrenArray[twoIndex].menuBool=e;
        //   if(e===true){
        //     childrenArray[twoIndex].indeterminate=false;
        //   }
        // }
        if (tickCount === len) {//二级全勾选
          this.menuData[oneIndex].menuBool = e;
          this.menuData[oneIndex].indeterminate = false
        } else if (unTickCount === len) {//二级全不勾选
          this.menuData[oneIndex].menuBool = e;
          this.menuData[oneIndex].indeterminate = false
        } else {
          this.menuData[oneIndex].menuBool = e;
          this.menuData[oneIndex].indeterminate = true //添加一级不确定状态
        }
        if(e === true){
          this.add(this.Menuid,oneId)
        }

        this.getIsCheckAll()
      },
      //三级change事件
      // checkedThreeAll(oneIndex, twoIndex, threeIndex, threeId, twoId,oneId, e) {
      //   let childrenArray = this.menuData[oneIndex].children[twoIndex].children;
      // let childArr = this.menuData[oneIndex].children;
      //   let tickCount = 0, unTickCount = 0, len = childrenArray.length;
      //   for (let i = 0; i < len; i++) {
      //     if (threeId === childrenArray[i].menuId) {
      //       childrenArray[i].menuBool = e;
      //       if(e === true){
      //         this.add(this.Menuid,threeId)
      //         this.add(this.Menuid,twoId)
      //       }else if(e===false){
      //         this.remove(this.Menuid,threeId)
      //       }
      //     }
      //     if (childrenArray[i].menuBool === true) tickCount++;
      //     if (childrenArray[i].menuBool === false) unTickCount++
      //   }
      // if(tickCount == 0){
      //     this.remove(this.Menuid,twoId)
      //   }
      //   if (tickCount === len) {
      //     this.menuData[oneIndex].children[twoIndex].menuBool = true;
      //     this.menuData[oneIndex].children[twoIndex].indeterminate = false
      //     this.menuData[oneIndex].menuBool = false;
      //     this.menuData[oneIndex].indeterminate = true; //添加二级不确定状态
      //   } else if (unTickCount === len) {
      //     this.menuData[oneIndex].children[twoIndex].menuBool = false;
      //     this.menuData[oneIndex].children[twoIndex].indeterminate = false;
      //     this.menuData[oneIndex].menuBool = false;
      //     this.menuData[oneIndex].indeterminate = true; //添加二级不确定状态
      //     this.isCheckAll = false;
      //     this.indeterminate = true;
      //   } else if (tickCount !== len) {
      //     this.menuData[oneIndex].children[twoIndex].menuBool = true;
      //     this.menuData[oneIndex].children[twoIndex].indeterminate = true;
      //     this.menuData[oneIndex].menuBool = false;
      //     this.menuData[oneIndex].indeterminate = true; //添加二级不确定状态
      //     this.isCheckAll = false;
      //     this.indeterminate = true;
      //   }
      // let isArr = this.getAttrs(childArr,"menuBool")
      //   if(isArr.indexOf(true) < 0){
      //     this.remove(this.Menuid,oneId)
      //     this.menuData[oneIndex].menuBool = false;
      //     this.menuData[oneIndex].indeterminate = false; //添加二级不确定状态
      //   }
      //   if(e === true){
      //     this.add(this.Menuid,oneId)
      //   }else if(e === false){
      //     this.remove(this.Menuid,oneId)
      //   }
      //   this.getIsCheckAll()
      // },
      /**
       *是否全选
       */
      getIsCheckAll() {
        var tickCount = 0, unTickCount = 0, ArrLength = this.menuData.length;
        for (var j = 0; j < ArrLength; j++) {//全选checkbox状态
          if (this.menuData[j].menuBool === true) tickCount++;
          if (this.menuData[j].menuBool === false) unTickCount++
        }
        if (tickCount === ArrLength) {//二级全勾选
          this.isCheckAll = true;
          this.indeterminate = false
        } else if (unTickCount === ArrLength) {//二级全不勾选
          this.isCheckAll = false;
          this.indeterminate = false
        } else {
          this.isCheckAll = false;
          this.indeterminate = true //添加一级不确定状态
        }
      },
    //获取角色信息列表
    async getRole() {
      let userIds = await this.$api.management.getseleuser();
      this.userIds = userIds.data;
    },
    //获取列表数据
    async getMenuData(radio) {
      try {
        let params = {
          usid: radio,
        }
        let RoleMenu = await this.$api.management.getuab(params);
        this.Menuid = this.getAttrs(RoleMenu.data2,'menuId')
        this.menuData = RoleMenu.data;
        this.menuData.forEach((oneItem,oneIndex) => {
          if (oneItem.children.length > 0) {
            let oneCountNum = oneItem.children.length;
            let isOneCheckedNum = 0;
            oneItem.children.forEach(twoItem => {
              if (twoItem.menuBool) {
                isOneCheckedNum += 1;
              }
              // if (twoItem.children.length > 0) {
              //   let twoCountNum = twoItem.children.length;
              //   let isTwoCheckedNum = 0;
              //   twoItem.children.forEach(three => {
              //     if (three.menuBool) {
              //       isTwoCheckedNum += 1;
              //     }
              //   });
              //   twoItem.menuBool = isTwoCheckedNum === twoCountNum;
              //   twoItem.indeterminate = isTwoCheckedNum > 0 && isTwoCheckedNum < twoCountNum;
              // }
            });
            oneItem.menuBool = isOneCheckedNum === oneCountNum;
            oneItem.indeterminate = isOneCheckedNum > 0 && isOneCheckedNum < oneCountNum;
          }
        });
        this.getIsCheckAll()
      } catch (e) {
        console.log(e)
      }
    },
    //保存
    async save(){
      try {
        let params = {
          usid: this.radio,
          Menuid: this.Menuid,
        }
        let res = await this.$api.management.setuab(params)
        if(res.code == 200){
            this.$message({
              showClose: true,
              message: this.$t('public.savasuccess'),
              type: "success"
            });
            this.getMenuData(params.usid)
          }else{
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error"
            });
          }
      } catch (e) {
        console.log(e)
      }
    }
  },
  filters:{
      filterName(value){
        return value.substring(0,
          5)+'...'
      }
    }
            
}
</script>

<style lang="less" scoped>
.fontbold{
  font-weight: bold;
  color: #3e86fb;
}
.box{
  display: flex;
  justify-content: space-between;
}
.leftBox{
  background: #172a4d;
  .content{
    display: flex;
    flex-direction: column;
    .el-radio{
      display: flex;
      justify-content: space-between;
      margin: 0;
      border: 0;
    }
    .is-checked{
      background: #203965;
      border-radius: 0px;
      // border: 1px #254276 solid;
      border-left: 5px #cb993d solid;
    }
  }
}
.rightBox{
  background: #172a4d;
  .rightTop{
    height: 58px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .save{
      width: 84px;
      height: 31px;
      margin: 0 15px;
      display: flex;
      align-items: center;
    }
  }
}
header{
  .headline{
    height: 52px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:  0 90px;
    line-height: 40px;
    font-size: 16px;
    .el-button{
      height: 34px;
    }
  }
  .headlines{
    height: 52px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:  0 15px;
    line-height: 40px;
    font-size: 16px;
    color: #017ffb;
    .el-button{
      height: 34px;
    }
  }
  .msg{
    height: 32px;
    background: #E5F8F7;
    line-height: 32px;
    padding-left: 15px;
    // margin: 0 10px;
  }
  .msgs{
    background: #017ffb;
    height: 32px;
    line-height: 32px;
    padding-left: 15px;
  }
}
.headLeft{
  background: url(../../../assets/authority1.png) no-repeat;
  background-size: 100% 100%;
}
.headRight{
  background: url(../../../assets/authority2.png) no-repeat;
  background-size: 100% 100%;
}
.checkedAll{
  line-height: 58px;
  padding-left: 5px;
  margin-left: 15px;
}
.content{
  /deep/.el-collapse-item__header, /deep/.el-collapse-item__wrap{
    border: none;
    padding: 0 20px;
  }
}
/deep/.el-collapse-item__header{
  background: #00507b;
  height: 32px;
}
/deep/ .el-collapse-item__content {
    padding-bottom: 0;
    // height: 157px;
    line-height: 50px;
}
.el-collapse-item:nth-child(4){
  /deep/ .el-collapse-item__content{
    height: 180px;
  }
}
.icon-biaozhu{
  font-size: 12px;
  margin-right: 5px;
  color: #fda96b;
}
.el-collapse{
  border: 0;
}
.icon-message{
    font-size: 20px;
    margin-right: 10px;
    color: #fda96b;
}

</style>